<template>
  <main>
    <div ref="chartDom" style="width:600px;height:400px"></div>

  </main>
</template>
<script setup>

import * as echarts from 'echarts';
import { nextTick, ref, onMounted, shallowRef, onUnmounted, computed } from 'vue';

const chartDom = shallowRef(null)

let chartInstance = null

const dataSale = ref([
  {
    name: 'jack',
    mouth: 1,
    total: 10
  },
  {
    name: 'jack',
    mouth: 2,
    total: 30
  },
  {
    name: 'jack',
    mouth: 3,
    total: 20
  },
  {
    name: 'lili',
    mouth: 1,
    total: 20
  },
  {
    name: 'lili',
    mouth: 2,
    total: 10
  },
  {
    name: 'lili',
    mouth: 3,
    total: 15
  },
  {
    name: 'lucy',
    mouth: 1,
    total: 30
  },
  {
    name: 'lucy',
    mouth: 5,
    total: 20
  },
  {
    name: 'lucy',
    mouth: 6,
    total: 10
  },
  {
    name: 'tom',
    mouth: 11,
    total: 10
  },
  {
    name: 'tom',
    mouth: 12,
    total: 25
  },
]);

const r2 = computed(() => {
  const tmp1 = [];
  dataSale.value.forEach((el) => {
    if (tmp1.includes(el.name) === false) {
      tmp1.push(el.name);
    }
  })
  console.log(tmp1);

  const tmp2 = [];
  tmp1.forEach((el) => {
    const d = {
      name: el,
      type: 'line',
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    };

    dataSale.value.forEach((els) => {
      if (els.name === el) {
        d.data[els.mouth - 1] = els.total
      }
    })
    tmp2.push(d)
  })

  console.log(tmp2);
  return tmp2;
});

onMounted(async () => {
  await nextTick()
  chartInstance = echarts.init(chartDom.value)


  chartInstance.setOption({
    title: {
      text: 'ECharts 示例图表'
    },
    tooltip: {},
    xAxis: {
      data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ]
    },
    yAxis: {},
    series: r2.value
  })
});
// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

</script>